<template>
    <div>
        <input type="text" v-model="msg">
        <p>msg的值是： {{ msg }}</p>

        <!-- 普通属性怎么用，计算属性就能怎么用 -->
        <input type="text" v-model="comMsg">

    </div>
</template>

<script>
export default {

    data () {

        return {

            msg: '你好'
        }
    },

    computed: {
        
        // // 这种写法只能对计算属性进行取值,没有赋值
        // comMsg () {

        //     return 'hello'
        // }

        // 所以计算属性的完整写法是既可以取值，又可以赋值
        comMsg: {
            // 对计算属性取值调用
            get () {
                console.log('计算属性取值了')
                return 'hello'
            },

            // 对计算属性赋值调用
            // 参数就是它被赋的值
            set (val) {

                console.log('对计算属性赋值了', val)
            }
        }
    }
}
</script>

<style>

</style>